<!-- 订单统计 -->
<template>
    <div id="orderStatistics-box" ref="chart">

    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref, onBeforeUnmount } from 'vue';
const chart = ref(null);
let myChart = null;

const initChart = () => {
    myChart = echarts.init(chart.value);
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        //图例 数据展示分类
        legend: {
            data: ['蒸发量', '降水量', '平均温度']
        },
        xAxis: [
            {
                type: 'category',
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '水量',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value} ml'
                }
            },
            {
                type: 'value',
                name: '温度',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                    formatter: '{value} °C'
                }
            }
        ],
        series: [
            {
                name: '蒸发量',
                type: 'bar',
                yAxisIndex: 0,
                data: [10, 32, 50, 70, 75, 100, 130, 170, 180, 112, 50, 5],
                itemStyle: {
                    color: 'rgb(149, 4, 4)' 
                }
            },
            {
                name: '降水量',
                type: 'bar',
                yAxisIndex: 0,
                data: [10, 32, 50, 75, 80, 120, 150, 180, 200, 135, 65, 10],
                itemStyle: {
                    color: 'rgb(11, 36, 88)' 
                }
            },
            {
                name: '平均温度',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' °C';
                    }
                },
                data: [5, 5.2,6.3, 7.5, 9.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
                itemStyle: {
                    color: 'rgb(125, 191, 244)'
                }
            }
        ]
    };
    //初始化echarts实例 生成图
    myChart.setOption(option);
}
onMounted(() => {
    initChart();
})
//实现echarts自适应
const onResize = () => {
    myChart.resize();
}
//监听窗口大小变化 window都事件在其它组件也会被触发 所有要通过销毁周期销毁
window.addEventListener('resize', onResize)
//销毁周期 消除事件监听
//在销毁的一瞬间执行
onBeforeUnmount(() => {
    window.removeEventListener('resize', onResize)
})
</script>

<style scoped>
#orderStatistics-box {
    width: 100%;
    height: 100%;
}
</style>